<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>

  <script src="../bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
  <link rel="stylesheet" href="roboto/roboto.css">
  <style>
    body {
      font-family: 'Roboto', 'Noto', 'Microsoft YaHei UI', sans-serif;
    }

    * {
      --text-color: red;
    }

    paper-input {
      --paper-input-container-input-color: var(--text-color);
      --paper-input-container-underline: {
        background: rgba(255, 255, 255, 0.2);
      }
    }
  </style>

  <link rel="import" href="../bower_components/paper-input/paper-input.html">
  <link rel="import" href="../bower_components/paper-button/paper-button.html">
  <link rel="import" href="aaa.html">

  <style is="custom-style">
    /* Use the :root selector to define custom properties and mixins */
    /* at the document level  */
    :root {
      --paper-input-container-input-color: red;
      --paper-input-container-underline: {
        background: rgba(255, 255, 255, 0.2);
      }
    }

  </style>

</head>
<body>
<style>
  .text-color {
    color: var(--text-color);
  }
</style>
<span class="text-color">Text</span>

<style>
  * {
    --text-color: green;
  }
</style>
<span class="text-color">Text 中文</span>

<paper-input value="fjdksjfklsjgklsjdf" label="fjdksjfkds"></paper-input>
<my-simple-namecard></my-simple-namecard>
<paper-button>Button</paper-button>
<script>
  document.addEventListener("WebComponentsReady", function () {
  });
</script>
</body>
</html>
